<template>
  <div class="app-container">
    <div class="formDiv">
      <el-form ref="form" :inline="true" label-width="140px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="流水单号">
              <el-input v-model="params.orderSn" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户姓名">
              <el-input v-model="params.name" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户手机号">
              <el-input v-model="params.phone" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="扣款方式">
              <el-select
                clearable
                filterable
                v-model="params.sumType"
                @clear="abc('sumType')"
                placeholder="请选择"
              >
                <el-option label="全部" :value="null"></el-option>
                <el-option label="账户余额" :value="0"></el-option>
                <el-option label="信用额度" :value="1"></el-option>
                <el-option label="账户余额 + 信用额度" :value="2"></el-option>
                <el-option label="欠款抵扣" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="医院名称">
              <el-select
                clearable
                filterable
                v-model="params.hospitalId"
                @clear="abc('hospitalId')"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in officeOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="交易时间">
              <el-date-picker
                v-model="time"
                type="daterange"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="交易类型">
              <el-select
                clearable
                filterable
                v-model="params.tradeType"
                @clear="abc('tradeType')"
                placeholder="请选择"
              >
                <el-option label="全部" :value="null"></el-option>
                <el-option label="成交" :value="1"></el-option>
                <el-option label="升单" :value="2"></el-option>
                <el-option label="退款" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- s19 -->
          <el-col :span="12">
            <el-form-item label="报单类型">
              <el-select v-model="params.formType" placeholder="请选择">
                <el-option label="全部" :value="null" />
                <el-option label="美美咖报单" :value="0" />
                <el-option label="传统报单" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button style="margin-left:60px" type="primary" @click="searchFn">查询</el-button>
            <Exprotcomponent
              :params="params"
              url="/com.mmk.reservation.api.MmkHospitalOrderRecordProvider/1.0.0/exportBeautyOrder.html"
              type="java"
              permissionJson="MmkHospitalOrderRecordProvider.exportBeautyOrder"
            ></Exprotcomponent>
            <!-- <el-button
              style="margin-left:60px"
              type="primary"
              @click="exfun"
              v-if="$store.state.user.permissionJson.indexOf('MmkHospitalOrderRecordProvider.exportBeautyOrder') !=-1"
            >导出</el-button>-->
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="listDiv">
      <el-table :data="tableData" class="tableData" style="width: 100%" :cell-class-name="addClass">
        <el-table-column
          type="index"
          label="序号"
          fixed="left"
          align="center"
          :index="table_index"
          width="50"
        ></el-table-column>
        <el-table-column prop="orderSn" label="流水单号" align="center" />
        <el-table-column prop="hospitalName" label="医院名称" align="center" />
        <el-table-column prop="username" label="客户姓名" align="center" />
        <el-table-column prop="userPhone" label="客户手机号" align="center">
          <template slot-scope="scope">
            <div>{{scope.row.userPhone | phonereg }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="tradeType" label="交易类型" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.tradeType==1">成交</span>
            <span v-if="scope.row.tradeType==2">升单</span>
            <span v-if="scope.row.tradeType==3">退款</span>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="当前交易金额" align="center">
          <template slot-scope="scope">
            <div v-for="item in scope.row.paymentValue" :key="item">{{ item }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="paymentSum" label="结算基数" align="center"></el-table-column>
        <el-table-column prop="formType" label="报单类型" align="center"></el-table-column>
        <el-table-column prop="salesTypeValue" label="活动" align="center"></el-table-column>
        <el-table-column prop="reimbursementRatio" label="回款比例" align="center">
          <template slot-scope="scope">{{scope.row.reimbursementRatio ||0}} %</template>
        </el-table-column>
        <el-table-column prop="sumAmount" label="当前交易结算金额" align="center" />

        <el-table-column prop="tradeTime" label="交易时间" align="center">
          <template slot-scope="scope">{{scope.row.tradeTime | date(1)}}</template>
        </el-table-column>
        <el-table-column label="流水单最终交易金额" align="center">
          <template slot-scope="scope">
            交易总金额：{{scope.row.totalMoney}}
            <br />
            杂费金额：{{scope.row.otherMoney}}
            <br />
            扣除杂费金额：{{scope.row.leftTotalMoney}}
            <br />
          </template>
        </el-table-column>
        <el-table-column prop="sumType" label="扣款方式" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.sumType==0">账户余额</span>
            <span v-if="scope.row.sumType==1">信用额度</span>
            <span v-if="scope.row.sumType==2">账户余额 + 信用额度</span>
            <span v-if="scope.row.sumType==3">欠款抵扣</span>
          </template>
        </el-table-column>

        <el-table-column prop="outBalance" label="账户支出" align="center" />
        <el-table-column prop="inBalance" label="账户收入" align="center" />
        <el-table-column prop="name" label="账户余额" align="center">
          <template slot-scope="scope">
            交易前：{{scope.row.beforeBalance}}
            <br />
            交易后：{{scope.row.afterBalance}}
          </template>
        </el-table-column>
        <el-table-column prop="outCredit" label="额度支出" align="center" />
        <el-table-column prop="inCredit" label="额度收入" align="center" />
        <el-table-column label="额度" align="center">
          <template slot-scope="scope">
            交易前：{{scope.row.beforeCredit}}
            <br />
            交易后：{{scope.row.afterCredit}}
          </template>
        </el-table-column>
        <el-table-column prop="oweAmount" label="欠款抵扣金额" align="center" />

        <el-table-column prop="oweAmount" label="欠款抵扣前/后金额" align="center">
          <template slot-scope="scope">
            欠款抵扣前金额：{{scope.row.beforeOweAmount}}
            <br />
            欠款抵扣后金额：{{scope.row.afterOweAmount}}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagesCon">
      <div>
        <el-pagination
          :current-page="params.pageNum"
          :page-sizes="[10, 20, 50, 100,1000]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import filter from "@/assets/filter.js";
import { hospitalDropDown } from "@/api/doctorManage";
import { exportfile } from "@/api/commjs/exprot";
import { listHospitalBeautyOrder } from "@/api/money";
export default {
  name: "",
  data() {
    return {
      officeOption: [],
      total: 0,
      time: "",
      tableData: [],
      params: { pageNum: 1, pageSize: 10 }
    };
  },
  created() {
    this.list();
    this.hlist();
  },
  watch: {
    time(val) {
      this.params.start = val ? val[0] : "";
      this.params.end = val ? val[1] : "";
    }
  },
  methods: {
    abc(val) {
      if (!this.params[val]) this.params[val] = null;
      console.log(val, this.params[val]);
    },
    //导出
    exfun() {
      exportfile(
        "/com.mmk.reservation.api.MmkHospitalOrderRecordProvider/1.0.0/exportBeautyOrder.html",
        this.params
      );
    },
    addClass({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 7) {
        return "red";
      }
      if (columnIndex == 15 || columnIndex == 16 || columnIndex == 17) {
        return "yellow";
      }
      if (columnIndex == 18 || columnIndex == 19 || columnIndex == 20) {
        return "bule";
      }
    },
    searchFn() {
      this.params.pageNum = 1;
      this.list();
    },
    async list() {
      let res = await listHospitalBeautyOrder(this.params);
      if (res.data.code == 0) {
        this.tableData = res.data.data.list;
        this.total = res.data.data.count;
      }
    },
    hlist() {
      hospitalDropDown().then(res => {
        let resData = res.data.data;
        let newData = [];
        resData.forEach(e => {
          newData.push({
            value: e.id + "",
            label: e.name
          });
        });
        newData.unshift({
          value: null,
          label: "全部"
        });
        this.officeOption = newData;
        // console.log(this.officeOption)
      });
    },
    handleSizeChange(val) {
      this.params.pageNum = 1;
      this.params.pageSize = val;
      this.list();
    },
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.list();
    },
    table_index(index) {
      return (this.params.pageNum - 1) * this.params.pageSize + index + 1;
    }
  }
};
</script>
<style scoped>
.listDiv /deep/ .red {
  color: red;
}
.listDiv /deep/ .yellow {
  color: #f7b156;
}
.listDiv /deep/ .bule {
  color: blue;
}
</style>